<template>
  <div class="adress">
    <van-nav-bar
        title="地址管理"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="adress-list">
      <van-divider
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        我的地址
      </van-divider>
      <van-address-list
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认"
          @add="showPopup"
          @edit="onEdit"
      />
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
      <van-address-edit
          :area-list="areaList"
          :address-info="AddressInfo"
          show-delete
          show-set-default
          show-search-result
          show-area
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail(AddressInfo)"
      />
    </van-popup>
  </div>
</template>

<script>
import {areaList} from '@vant/area-data';

export default {
  data() {
    return {
      AddressInfo: {},
      show: false,
      areaList,
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true,
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号',
        },
      ],
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    onClickLeft() {
      this.$router.push({
        path: "/me",
        query: {
          tab: 4
        }
      })
    },
    onEdit(item,index) {

    },
    onDelete() {
      this.show = false;
    },
    onSave(address) {
      address.address = address.province + address.city + address.county + address.addressDetail;
      console.log(address)

      this.list.push(address);
      this.show = false;
    },
    onChangeDetail(AddressInfo) {

    }
  },
};
</script>

<style scoped lang="less">
.adress-list {
  padding-top: 50px;
}
</style>
